<template>
  <div style="overflow: hidden;text-align: center;" >
    <img
      v-if="propValue.tabIndex == 0"
      :src="propValue.value"
       :style="{
        opacity: propValue.opacity + '%',
      }"
      :alt="propValue.Alt"
    />
    <img
      class="imgTab1"
      :style="{
        width: element.style.height+'rem',
        height: element.style.height+'rem',
        margin: 'auto',
        opacity: propValue.opacity + '%',
      }"
      v-else-if="propValue.tabIndex == 1"
      :src="propValue.value"
      :alt="propValue.Alt"
    />
    <img
      class="imgTab2"
      :style="{
        'border-radius': propValue.radius + 'rem',
        opacity: propValue.opacity + '%',
      }"
      v-else-if="propValue.tabIndex == 2"
      :src="propValue.value"
      :alt="propValue.Alt"
    />
    <img
      class="imgTab3"
       :style="{
        opacity: propValue.opacity + '%',
          width: element.style.height+'rem',
      }"
      v-else-if="propValue.tabIndex == 3"
      :src="propValue.value"
      :alt="propValue.Alt"
    />
     <img v-else :src="propValue">
  </div>
</template>

<script>
export default {
  props: {
    propValue: {
      type:[Object,String],
      default: "",
    },
    element: {
      type: Object,
      default: () => {},
    },
  },
};
</script>

<style lang="scss" scoped>
img {
  width: 100%;
  height: 100%;
}
.imgTab3{
    border-radius: 50%;
}
</style>
